// 提供一个能供显示xtx-message组件的函数
// 这个函数可以导入直接使用，也可以挂载导vue实例原型上

import XtxMessage from './xtx-message.vue'
import { render, createVNode } from 'vue'

// 首先先创建一个DOM容器
const div = document.createElement('div')
// 往容器里面添加属性
div.setAttribute('class', 'xtx-msssage-container')
document.body.appendChild(div)

let time = null
export default ({ text, type }) => {
  /**
   * 创建虚拟DOM
   * XtxMessage => 创建元素类型
   * { text, type } => 创建元素属性
   */
  const vnode = createVNode(XtxMessage, { text, type })

  /**
   * canyu => 要被渲染的虚拟 DOM
   * div => 要渲染的位置
   */
  render(vnode, div)

  clearTimeout(time)
  // 3秒后销毁组件
  time = setTimeout(() => {
    render(null, div)
  }, 3000)
}
